<template>
    <div class="bg-gray-100 rounded-lg font-sans">
        <div class="text-right items-center" v-if="mode=='预览'"> 
            <button  class="bg-blue-500 text-white px-2 py-1 rounded-bl-lg " @click="handleEditQuestion">编辑</button>
            <button class="px-2 py-1 rounded-br-lg" @click="handleDeleteQuestion" >
                <font-awesome-icon icon="far fa-trash-can" class="text-xl ml-1 text-gray-400 hover:text-blue-400"></font-awesome-icon>
            </button>
        </div>
        <div class="text-right items-center" v-else-if="mode=='编辑题目'">
            <button class="px-2 py-1 rounded-br-lg " @click="mode='预览'">
                <font-awesome-icon icon="fas fa-reply" class="text-xl mr-2 text-gray-400 hover:text-blue-400"></font-awesome-icon>返回
            </button>
        </div>    



        <!-- 题目预览 -->
        <div class="p-4" v-if="mode=='预览'"> 
           <QueReviewComponent :questionDetail="questionDetail" :from="'题库'"/>
        </div>
        <!-- 编辑模式 -->
         <div v-else-if="mode=='编辑题目'"> 
            <CreateQuestionMain :questionData="questionDetail"  :mode="from" :currentType="questionDetail.questionType" /> 
         </div>
    </div>
</template>

<script setup>
import { ref,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { getQuestionDetail } from '@/api/questions'
import {Delete} from '@element-plus/icons-vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import {ElMessageBox,ElMessage} from 'element-plus'
import CreateQuestionMain from './CreateQuestionMain.vue'
import QueReviewComponent from './QueReviewComponent.vue'

const route = useRoute()
const router = useRouter()
// console.log(route.params.id)
//题目详情
const   questionDetail = ref({})
const mode = ref('预览')
const  from = ref('')
//根据id查询题目详情
const  getDetailData = async () => {
   
 getQuestionDetail(route.params.id).then(res=>{
    questionDetail.value = res.data.data

})
}
onMounted(async ()=>{
    // console.log(route.params.id,'rout --id');
    //获取题目详情数据
   await getDetailData()
})
// 删除题目
const   handleDeleteQuestion = () => {
    console.log('删除题目')
    ElMessageBox.confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除题目 调用后端接口删除
        /* deleteQuestion(route.params.id).then(res=>{
            ElMessage({
                type: 'success',
                message: '删除成功!'
            })
        }) */
       
    })
}
const handleEditQuestion = () => {
    mode.value = '编辑题目'
    from.value = '编辑'
}



</script >
<style lang="less" scoped>
</style>